<template>
	<public-view navType="other" navTitle="我的订单">
		<view class="content flex f-d-c a-i-c">
			<view class="scroll-view flex a-i-c">
				<scroll-view scroll-x="true" class="scroll">
					<view class="list">
						<block v-for="(item, index) in tab_list" :key="index">
							<view @click="changeTab(item)" class="item flex f-d-c a-i-c f-s-30" :class="tab_id === item.id?'active':'unactive'">
								{{item.title}}
								<view class="line" :style="{opacity:tab_id === item.id?'1':'0'}"></view>
								<!-- tab_id === item.id -->
							</view>
						</block>
					</view>
				</scroll-view>
			</view>
			<block v-for="(item, index) in order_list" :key="index">
				<view class="store-item-box flex f-d-c" @click="goToOrderInfo(item)">
					<view class="item-top-box flex a-i-c j-c-b">
						<view class="left flex a-i-c color-999 f-s-30" v-if="item.type === 2">
							<image class="icon" src="@/static/images/my/gift-store999.svg" mode=""></image>
							{{item.merchant?.name ||""}}
						</view>
						<view class="left flex a-i-c color-999 f-s-30" v-else>
							<image class="icon" src="@/static/images/my/gift-store999.svg" mode=""></image>
							{{item.real_store?.name ||""}}
						</view>
						<view class="status-text f-s-26"  :style="{color:item.status?.text?.color}">
							{{item.status?.text?.value||""}}
						</view>
					</view>
					<block v-if="item.type===2">
						<block v-for="(itm, idx) in item.goods_list" :key="idx">
							<view class="center flex a-i-c">
								<view class="left">
									<image class="image1" :src="itm.goods_sku_product_image" mode=""></image>
								</view>
								<view class="center-text">
									<view class="title f-s-26 color-333 f-w-b">
										{{itm.goods_name||""}}
									</view>
									<view class="subtitle f-s-24 l-h-34">
										{{itm.sku_text||""}}/数量{{itm.num||0}}
									</view>
								</view>
								<view class="money1 f-s-32 f-w-b">
									<text class="f-s-24 f-w-4">￥</text>{{itm.goods_sku_product_price||0}}
								</view>
							</view>
						</block>
						<view class="w-100 f-s-26 f-w-b" style="text-align: right;margin-bottom: 30rpx;">
							合计：￥{{item.amount||0}}
						</view>
					</block>
					<block v-else>
						<view class="center2 flex a-i-c">
							<image class="image2" :src="item.lorry?.pic" mode=""></image>
							<view class="right-title">
								<view class="name f-s-30">
									{{item.lorry?.name||""}}
								</view>
								<view class="money f-s-22">
									<text class="f-s-40 f-w-b" style="font-style: italic;">{{item.lorry.front_price||0}}</text>万
								</view>
								<view class="f-s-26 color-999">
									定金<text>￥</text><text class="f-w-b" style="color: #FF3158;">{{item.allow_refund_amount||0}}</text>
								</view>
							</view>
						</view>
					</block>
					<view class="operate-box f-s-24 flex a-i-c j-c-e">
						<block v-if="item.type !==2">
							 <!-- @click="$callPhone(item.phone)" -->
							<view class="item bg1 all-center" @click.stop="$callPhone(item.real_store?.contact)" v-if="item.status?.buttons?.contact">
								联系门店
							</view>
							<view class="item bg2 all-center" v-if="item.status?.buttons?.refund" @clic.stop="goTo({url:'orderInfo?btn=cancle&id='+item.id})">
								取消预约
							</view>
							<view class="item bg2 all-center" @click.stop="cancleOrder(item)" v-if="item.status?.buttons?.cancel">
								取消订单
							</view>
							<view class="item bg3 all-center" v-if="item.status?.buttons?.pay" @click.stop="showPayType(item)">
								去支付
							</view>
							<view class="item bg2 all-center " @click.stop="delOrder(item,index)" v-if="item.status?.buttons?.del">
								删除订单
							</view>
						</block>
						<block v-else>
							<!-- <view class="item bg2 all-center " @click.stop="goTo({url:`/pages/order/getExpress?express=${item.express_data?.express}&express_sn=${item.express_data?.express_sn}`})">
								查看物流
							</view> -->
							<view class="item bg4 all-center" @click.stop="enterGetGoods(item)" v-if="item.status?.buttons?.confirm">
								确认收货
							</view>
							<view class="item bg2 all-center" @click.stop="cancleOrder(item)" v-if="item.status?.buttons?.cancel">
								取消订单
							</view>
							<view class="item bg2 all-center " @click.stop="delOrder(item)" v-if="item.status?.buttons?.del">
								删除订单
							</view>
							<view class="item bg2 all-center " @click.stop="goTo({url:'/pages/order/orderBack?id='+item.id})" v-if="item.status?.buttons?.refund">
								申请售后
							</view>
							<view class="item bg5 all-center" @click.stop="goTo({url:'/pages/order/orderMsg?id='+item.id})" v-if="item.status?.buttons?.comment">
								去评价
							</view>
							<view class="item bg3 all-center" v-if="item.status?.buttons?.pay" @click.stop="showPayType(item)">
								去支付
							</view>
						</block>
					</view>
				</view>
			</block>
			<pay-type-popup ref="payTypePopup" :item="choose_item" @refresh="refreshOrder"></pay-type-popup>
		</view>
	</public-view>
</template>

<script>
	import {goTo,reditTo} from "@/nav.js"
	import payTypePopup from "@/components/myComponents/payTypePopup.vue"
	import {cancleOrder} from "@/utils/pagePublic.js"
	export default {
		components:{
			"pay-type-popup":payTypePopup
		},
		data() {
			return {
				tab_id:"-1",
				tab_list:[
					{
						id:'-1',
						title:"全部"
					},
					{
						id:'0',
						title:"待付款"
					},
					{
						id:'7',
						title:"预约"
					},
					{
						id:'1',
						title:"待发货"
					},
					{
						id:'2',
						title:"待收货"
					},
					{
						id:'3',
						title:"待评价"
					},
				],
				page:1,
				order_list:[],
				choose_item:{}
			};
		},
		onLoad() {
			
		},
		onShow() {
			this.getMyOrderList()
		},
		onReachBottom() {
			this.page++
			this.getMyOrderList()
		},
		methods:{
			goTo,reditTo,
			delOrder(item,index){
				let that = this
				uni.showModal({
					title:"温馨提示",
					content:"是否删除该订单",
					success(res) {
						if(res.confirm){
							that.util.postRequest({
								url:"v1/order/delete",
								data:{
									order_id:item.id
								}
							}).then(ores=>{
								uni.showToast({
									title:"删除成功"
								})
								that.order_list.splice(index,1)
							})
						}
					}
				})
			},
			cancleOrder(itema){
				let id = itema.id
				let that = this
				let item = that.$store.state.public_config.goods[1].value
				uni.showActionSheet({
					itemList:item,
					success(res) {
						cancleOrder({
							order_id:id,
							reason:item[res.tapIndex]
						},()=>{
							that.refreshOrder()
						})
					}
				})
				
			},
			enterGetGoods(item){
				let that = this
				uni.showModal({
					title:"温馨提示",
					content:"是否确认收货？",
					success(res) {
						if(res.confirm){
							that.util.postRequest({
								url:"v1/order/confirm",
								data:{
									order_id:item.id
								}
							}).then(ores=>{
								uni.showModal({
									title:"温馨提示",
									content:"收货成功，是否去评价?",
									success(pres) {
										if(pres.confirm){
											that.goTo({url:"/pages/order/orderMsg?id="+item.id})
										}
									}
								})
							})
						}
					}
				})
			},
			refreshOrder(){
				this.page = 1
				this.order_list = []
				this.getMyOrderList()
			},
			goToOrderInfo(item){
				if(item.type === 2){
					this.goTo({url:'/pages/order/orderInfo?id='+item.id})
				}else{
					this.goTo({url:'orderInfo?id='+item.id})
				}
			},
			showPayType(item){
				this.choose_item = item
				this.$refs.payTypePopup.show()
			},
			getMyOrderList(){
				let that = this
				uni.showLoading({
					title:"订单加载中..."
				})
				that.util.postRequest({
					url:"v1/order/index",
					data:{
						page:that.page,
						rows:10,
						status:that.tab_id
					}
				}).then(res=>{
					console.log(res,"orderlist")
					uni.hideLoading()
					if(that.page === 1){
						that.order_list = res.data.data
					}else{
						if(res.data.data.length>0){
							that.order_list = that.order_list.concat(res.data.data)
						}else{
							that.page--
						}
					}
				}).catch(e=>{
					uni.hideLoading()
				})
			},
			changeTab(item){
				if(this.tab_id === item.id)return
				this.tab_id = item.id
				this.page = 1
				this.order_list = []
				this.getMyOrderList()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.store-item-box{
		width: 702upx;
		margin-bottom: 16upx;
		background: #FFFFFF;
		border-radius: 16upx;
		padding: 24upx 36upx;
		.center2{
			width: 100%;
			margin-bottom: 24upx;
			.right-title{
				width: 418upx;
				.money{
					color: #EE8300;
					line-height: 48upx;
					margin-bottom: 14upx;
				}
				.name{
					width: 100%;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					margin-bottom: 14upx;
					line-height: 30upx;
				}
			}
			.image2{
				width: 168upx;
				height: 168upx;
				border-radius: 8upx;
				margin-right: 26upx;
			}
		}
		.center{
			width: 100%;
			margin-bottom: 24upx;
			.money1{
				flex: 1;
				line-height: 34upx;
			}
			.center-text{
				width: 354upx;
				.subtitle{
					color: #bebebe;
				}
				.title{
					margin-bottom: 16upx;
					line-height: 36upx;
						
				}
			}
			.left{
				margin-right: 26upx;
				.image1{
					width: 116upx;
					height: 116upx;
					border-radius: 8upx;
				}
			}
			
		}
		.operate-box{
			width: 100%;
			.item{
				width: 158upx;
				height: 58upx;
				border-radius: 30upx;
				margin-right: 22upx;
			}
			.bg1{
				border: 1upx solid #CCCCCC;
			}
			.bg2{
				background: #2567F3;
				color: #FFFFFF;
			}
			.bg3{
				background: #F32E2E;
				color: #FFFFFF;
			}
			.bg4{
				background: #EE8300;
				color: #FFFFFF;
			}
			.bg5{
				border: 2upx solid #2567F3;
				color: #2567F3;
			}
		}
		.item-top-box{
			width: 100%;
			margin-bottom: 20upx;
			.status-text{
				
			}
			.color1{
				color: #F32E2E;
			}
			.color2{
				color: #2567F3;
			}
			.color3{
				color: #FBA808;
			}
			.left{
				.icon{
					width: 40upx;
					height: 40upx;
					margin-right: 16upx;
				}
			}
		}
	}
	.scroll-view{
		width: 100%;
		background: #FFFFFF;
		box-shadow: 0px 1upx 0px #F2F0F0;
		height: 100upx;
		margin-bottom: 20upx;
		.scroll{
			width: 100%;
			height: 100%;
			white-space: nowrap;
			.list{
				width: 100%;
				padding-left: 12upx;
				height: 100%;
				.item{
					position: relative;
					width: 140upx;
					position: relative;
					margin-right: 18upx;
					display: inline-flex;
					transform: translateY(-50%);
					top: 44%;
					transition: all .1s ease-out;
					.line{
						width: 36upx;
						height: 8upx;
						position: absolute;
						bottom: -16upx;
						background: #2567F3;
						transition: all .1s ease-out;
					}
				}
				.active{
					color: #333;
					font-weight: bold;
					font-size: 30upx;
				}
				.unactive{
					color: #666;
					font-size: 26upx;
				}
			}
		}
	}
	.content{
		width: 750upx;
		padding-top: 32upx;
	}
</style>
